<template>
    <div class="label-container">
        <div class="label-wrapper" v-for="(item, index) in comArr">
            <div class="label-item" :class="{ 'selected':tplIndex === index }" @click="$emit('changeTpl', index)">
                <component :is="item" :isTpl="true" ></component>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { watch } from 'vue';
    import Com1 from './1.vue';
    import Com2 from './2.vue';
    import Com3 from './3.vue';
    import Com4 from './4.vue';
    import Com5 from './5.vue';
    import Com6 from './6.vue';
    const props = defineProps({
        tplIndex:{ type:Number }
    })
    const comArr = [Com1, Com2, Com3, Com4, Com5, Com6];

</script>
<style scoped lang="scss">
    .label-container {
        display:flex;
        flex-wrap:wrap;
        .label-wrapper {
            width:33.3%;
            padding:var(--mPadding) var(--sPadding);
            .label-item {
                width:10cm;
                height:6.66cm;
                border-radius:8px;
            }
            .label-item.selected {
                .tpl-wrapper {
                    border-color:#335cff;
                }
            }
        }
    }
</style>